class Row extends HTMLElement {
    constructor() {
        super();

        const template = document.createElement("template");

        template.innerHTML = `
            <style>
                :host {
                    display: flex;
                    box-sizing: border-box;
                }
                .cp-row {
                    display: flex;
                    box-sizing: border-box;
                }
                :slot{
                    box-sizing: border-box;
                }
            </style>

            <div class="cp-row"><slot></slot></div>
        `;

        this._shadowRoot = this.attachShadow({
            mode: "open"
        });
        this._shadowRoot.appendChild(template.content.cloneNode(true));
    }

    static get observedAttributes() {
        return ["gutter"];
    }

    get gutter() {
        return this.getAttribute("gutter");
    }

    set gutter(value) {
        return this.setAttribute("gutter", value);
    }

    connectedCallback() {
        this.$row = this._shadowRoot.querySelector(".cp-row");
    }

    attributeChangedCallback(name, oldVal, newVal) {
        this.render(name);
    }
    render(name) {
        if (name === "span") {
            this.$row.style.flex = `0 0 ${this.span}`;
        }
    }
}

if (!customElements.get("cp-row")) {
    customElements.define("cp-row", Row);
}
